<template>
	<view class="container">
		<view class="top-shop">
			<view class="top-left" @click="navigator('/pages/index/index')">
				<u-icon size="24" name="home"></u-icon>
				<text>邓波测试店铺</text>
			</view>
			<u-icon size="24" name="search"></u-icon>
		</view>

		<view class="container-header">
			<u-image width="100%" height="400rpx" :src="objData.cover" mode="aspectFit"
				:errorIcon="errorProduct"></u-image>

			<!-- 商品信息 -->
			<view class="goods-info m-top20">
				<!-- 价格、销量 -->
				<view class="info-item info-item__top dis-flex flex-x-between flex-y-end">
					<view class="block-left dis-flex flex-y-center">
						<text class="floor-price__samll">￥</text>
						<text class="floor-price">{{ objData.price }}</text>
					</view>
					<view class="block-right dis-flex">
						<view class="goods-title">
							<text>{{ objData.title }}</text>
						</view>
						<view class="goods-sales">
							<text>{{ objData.description }}</text>
						</view>
						<!-- 销量 -->
						<view class="goods-sales">
							<text>{{ objData.coupon_num }}次观看</text>
						</view>
					</view>
				</view>
				<!-- 标题、分享 -->
				<view class="info-item info-item__name dis-flex flex-y-center">
					<view class="goods-share">
						<button class="share-btn dis-flex flex-dir-column" @click="copy">
							<u-icon name="share-square" size="22"></u-icon>
							<text class="f-24">分享</text>
						</button>
					</view>
					<!-- #ifdef MP-WEIXIN -->
					<!-- <view class="goods-share__line"></view> -->

					<!-- #endif -->
				</view>
			</view>
		</view>
		<view class="mt-bottom"></view>

		<u-cell-group>
			<u-cell icon="file-text" title="相关资料下载" :isLink="true" arrow-direction="left" :value="`共${count}个文件`"
				@click="downfiles"></u-cell>
		</u-cell-group>

		<!-- <view class="count_time" v-if="objData.end_time">
			<view class="time_left">
				<view class=""> 限时 </view>
				<view class=""> 折扣 </view>
			</view>
			<view class="time_right">
				<view class="time-m">
					限时折扣倒计时：
					<u-count-down :time="getTimestampDiff(objData.end_time, Date.now() / 1000)" format="DD:HH:mm:ss"
						autoStart millisecond @change="onChange">
						<view class="time">
							<text class="time__item">{{ timeData.days }}&nbsp;天</text>
							<text class="time__item">{{
                  timeData.hours > 10 ? timeData.hours : "0" + timeData.hours
                }}&nbsp;时</text>
							<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
							<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
						</view>
					</u-count-down>
				</view>

				<view class="time-s">
					<view class=""> 还剩{{ objData.goods_id[0].discount_num }}个 </view>
					<view class="">
					
						<text style="text-decoration: line-through; color: #aaaaaa">￥{{ objData.marking_price }}</text>
						<text>￥{{ objData.price }}</text>
					</view>
				</view>
			</view>
		</view> -->

		<view class="mt-bottom"></view>

		<u-tabs lineWidth="25" v-model="tabsIndex" @change="sectionChange" :list="clasList" keyName="title"
			lineColor="#ee0a24">
		</u-tabs>
		<view class="mt-bottom"></view>

		<!-- 详情 -->
		<view class="" v-if="tabsIndex === 0">
			<view class="" v-html="objData.custom_desc"></view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无数据"
				v-if="!objData.custom_desc"></u-empty>
		</view>

		<!-- 目录 -->
		<view class="catalogue" v-if="tabsIndex === 1">
			<view class="catalogue-box" v-for="item in knowledgedata" :key="item.id">
				<view class="catalogue-title">
					{{ item.title }}
				</view>
				<view class="catalogue-bottom" >
					<view class="">
						<u-tag :text="typeObj[item.type]" type="success" size="mini"></u-tag>
						<text>{{ item.create_time }} | {{ item.view }}次 学习</text>
					</view>
					<button v-if="item.expense === 1" @click="clickbuyone(item.id, item.type)">购买单个</button>
					<!-- <button v-if="item.isbuy == 1" type="success">
						你已经购买
					</button> -->
					<button v-if="item.expense === 0" type="success" @click="freeJump(item)">
						本集免费
					</button>
					
				</view>
			</view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无数据"
				v-if="!knowledgedata.length"></u-empty>
		</view>
		<!-- 课程评价 -->
		<view class="evaluate" v-if="tabsIndex === 2">
			<view class="evaluate-list" v-for="item in evaluateList" :key="item.rate">
				<view class="evaluate-header">
					<u--image :src="item.avatar" width="50rpx" height="50rpx" shape="circle"></u--image>
					<text>{{ item.nick_name }}</text>
				</view>
				<view class="evaluate-rating">
					<text>商品名: {{ item.infoname }} </text>

					<text> 星级: </text>
					<u-rate activeColor="#FFD21E" :value="item.rate" readonly></u-rate>
				</view>
				<view class="evaluate-content">
					{{ item.message }}
				</view>
			</view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无数据"
				v-if="!evaluateList.length"></u-empty>
		</view>
		<!-- 相关推荐 -->
		<view class="cate-container" v-if="tabsIndex === 3">
			<view class="cate-list">
				<view class="cate-list-record" v-for="item in columndata" :key="item.id" @click="jump(item)">
					<view class="">
						<u--image :src="item.cover_url || errorProduct" width="110px" height="90px" mode="aspectFit"
							:errorIcon="errorProduct">
						</u--image>
					</view>
					<view class="cate-list-inform">
						<view class="inform-title">
							{{ item.title }}
						</view>
						<view class="inform-left">
							<view class="inform-price">
								{{ item.price == "0.00" ? "免费" : item.price }}
							</view>
							<view class=""> {{ item.view || 0 }}次观看 </view>
						</view>
					</view>
				</view>
			</view>
			<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无数据"
				v-if="!columndata.length"></u-empty>
		</view>

		<!-- 底部选项卡 -->
		<view class="footer-fixed">
			<view class="footer-container">
				<!-- 导航图标 -->
				<view class="foo-item-fast">
					<!-- 客服 (仅微信小程序端显示) -->

					<!-- <button class="btn-normal" open-type="contact"> -->
					<view class="fast-item" @click="chat">
						<view class="fast-icon">
							<u-icon name="kefu-ermai" color="rgb(255, 80, 0)" size="22"></u-icon>
						</view>
						<view class="fast-text">
							<text>客服</text>
						</view>
					</view>
					<!-- </button> -->

					<!-- 购物车 -->
					<view class="fast-item fast-item--cart" @click="navigator('/pages/cart/index')">
						<view v-if="0" class="fast-badge fast-badge--fixed"> </view>
						<view class="fast-icon">
							<u-icon name="shopping-cart" size="22"></u-icon>
						</view>
						<view class="fast-text">
							<text>购物车</text>
						</view>
					</view>

					<view class="fast-item fast-item--cart">
						<view v-if="0" class="fast-badge fast-badge--fixed"> </view>
						<view class="fast-icon">
							<u-icon :name="objData.isselect ? 'star-fill' : 'star'" size="22" color="rgb(255, 80, 0)"
								@click="collection"></u-icon>
						</view>
						<view class="fast-text">
							<text>{{ objData.isselect ? "已收藏" : "收藏" }}</text>
						</view>
					</view>
				</view>
				<!-- 操作按钮 -->
				<view class="foo-item-btn">
					<view class="btn-wrapper" v-if="!objData.repeat_buy">
						<view class="btn-item btn-item-deputy" @click="addshopcart">
							<text>加入购物车</text>
						</view>
						<view class="btn-item btn-item-main" @click="clickbuy">
							<text>立即购买</text>
						</view>
					</view>
					<!-- <view class="btn-wrapper" v-if="isbuyfull == 1 && objData.price != 0">
						<view class="btn-item btn-item-deputy">
							<text>你已购买</text>
						</view>
					</view> -->
					<view class="btn-wrapper" v-if="objData.repeat_buy">
						<view class="btn-item btn-item-deputy">
							<text>免费课程</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<u-modal :show="show" :title="title" :content='content' @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	import {
		getTimestampDiff,
		isWeixin
	} from "@/utils/util";
	import config from '@/utils/config'
	import {
		api_getonecolumn,
		api_addshopcart,
		api_getcolumndownfilenologin,
		api_getknowledgelist,
		api_getevaluate,
		api_getrandgoodslist,
		api_addusercollect,
		api_delusercollect,
		api_getdetail,
		api_recommend
	} from "@/api/product.js";
	export default {
		data() {
			return {
				errorProduct: require("@/static/img/default_image.jpg"),
				currentNum: 0,
				count: 0,
				objData: {},

				// 分类
				clasList: [{
						id: 118,
						shop_id: 30,
						pid: 0,
						title: "详情",
					},
					{
						id: 108,
						shop_id: 30,
						pid: 0,
						title: "目录",
					},
					{
						id: 95,
						shop_id: 30,
						pid: 0,
						title: "课程评价",
					},
					{
						id: 110,
						shop_id: 30,
						pid: 0,
						title: "相关推荐",
					},
				],
				timeData: {},
				getTimestampDiff,

				// 目录
				knowledgedata: [],

				// 相关推荐
				columndata: [],

				typeObj: {
					video: "视频",
					image_text: "图文",
					audio:'音频',
					exam:'试卷'
				},

				tabsIndex: 0,

				evaluateList: [],
				isbuyfull: null,

				show: false,
				title: '温馨提示',
				content: '请在微信客户端打开此页面支付购买'
			};
		},
		onLoad(option) {
			this.option = option;
			this.option.shop_name = "db";
			this.query();
		},
		methods: {
			async query() {
				uni.showLoading({
					title: "数据加载中..."
				});
				api_getdetail(this.option).then((res) => {
					this.objData = res.data;
					this.knowledgedata = res.data.knowledge_list || [];
			
					uni.hideLoading();
				});

				let res = await api_getcolumndownfilenologin({
					column_id: this.option.id,
					...this.option,
				});
				this.count = res.data.count;
				// let result = await api_getknowledgelist(this.option);
				// if (result.code == 1) {
				// 	this.isbuyfull = result.data.isbuyfull;
				// 	console.log(this.isbuyfull, "this.isbuyfull");
				// 	this.knowledgedata = result.data.knowledgedata;
				// } else {
				// 	uni.showToast({
				// 		title: result.msg,
				// 		icon: "error",
				// 	});
				// }

				let res2 = await api_getevaluate({
					info_id: this.option.id,
					...this.option,
				});
				if (res2.code == 1) {
					this.evaluateList = res2.data;
				} else {
					uni.showToast({
						title: res2.msg,
						icon: "error",
					});
				}
			},

			async addshopcart() {
				let opt = {
					...this.option,
					type:this.option.data_type
				}
				let res = await api_addshopcart(opt);
				uni.showToast({
					title: res.msg,
					icon: "none",
					fontSize: 18,
				});
			},

			async getrandgoodslist() {
				let app = this;
			
				let res = await api_recommend(app.option);
				if (res.code == 1) {
					this.columndata = res.data;
				} else {
					uni.showToast({
						title: res.msg,
						icon: "error",
					});
				}
			},
			onChange(e) {
				this.timeData = e;
			},

			async collection() {
				let app = this;

				let apiFunction = this.objData.isselect ?
					api_delusercollect :
					api_addusercollect;

				let res = await apiFunction({
					columnid: app.option.id,
					shop_name: "db",
				});

				if (res.code == 1) {
					this.objData.isselect = !this.objData.isselect;
				}

				uni.showToast({
					title: res.msg,
					icon: "none",
				});
			},
			copy() {
				let url = location.href;

				uni.setClipboardData({
					data: url,
					success: function() {
						uni.showToast({
							title: "复制链接成功",
						});
					},
				});
			},

			sectionChange(index) {
				this.tabsIndex = index.index;
				if (this.tabsIndex === 3) {
					this.getrandgoodslist();
				}
			},

			navigator(url) {
				// uni.navigateTo({
				// 	url: url
				// })
				uni.reLaunch({
					url: url,
				});
			},
			jump(item) {
				uni.reLaunch({
					url: "/pages/product/index" + `?id=${item.id}&columnid=order&data_type=${item.data_type}`,
				});
			},
			freeJump(item) {
				let type = item.type; // 假设商品类型为图文
				
				switch (type) {
					case "image_text":
						// 当商品类型为图文时执行的操作
						uni.navigateTo({
							url: "/pages/free_courses/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						// uni.navigateTo({
						// 	url: "/pages/free_courses/index" + `?id=${item.id}`,
						// });
						break;
					case "audio":
						// 当商品类型为音频时执行的操作
						uni.navigateTo({
							url: "/pages/audiocontent/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						break;
					case "video":
						// 当商品类型为视频时执行的操作
						uni.navigateTo({
							url: "/pages/videocontent/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						break;
					case "exam":
						// 当商品类型为试卷的操作
						uni.navigateTo({
							url: "/pages/examcontent/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						break;
					case "column":
						// 当商品类型为专栏时执行的操作
						uni.navigateTo({
							url: "/pages/product/index" + `?id=${item.id}&columnid=order&data_type=${type}`,
						});
						break;
					default:
					}
			},

			downfiles(id) {
				uni.navigateTo({
					url: `/pages/downfiles/index?id=${this.option.id}`,
				});
			},
			chat() {
				uni.navigateTo({
					url: `/pages/chat_window/index?id=${this.option.id}`,
				});
			},
			confirm() {

				// 3秒后自动关闭
				this.show = false;

			},
			clickbuy(id, type) {
				uni.navigateTo({
					url: `/pages/placeorder/index?ids=${this.option.id}&data_type=${this.option.data_type}`,
				});
			},
			clickbuyone(id, type) {
				uni.navigateTo({
					url: `/pages/placeorder/index?ids=${id}&data_type=${type}`,
				});
				
				if (isWeixin()) {
					console.log(1111)
					// this.toOrderOne(id,type)
				} else {
					
					this.show = true;

				}
			},

			toOrderOne(id, type) {
				// let domainname = this.$route.params.domainname;
				let FrontUrl = window.location.protocol + '//' + window.location.host;
				if (type == 'exam') {
					// let url = config.baseURL + '/user/wxzhifu/getweixinopenid' + `?nexturl=${encodeURIComponent(nexturl)}`;
					const nexturl = FrontUrl +
					`/pages/product/index?id=${id}`; //跳转到下一个页面的地址http://192.168.2.11/#/xuejing/order/test1?id=8
					let url =   config.baseURL + '/user/wxzhifu/getweixinopenid' +
					`?nexturl=${encodeURIComponent(nexturl)}`; //请求获得openid并存入到服务器的Cache当中
					window.location.href = url;
				} else {
					const nexturl = FrontUrl +
					`/pages/product/index?id=${id}`; //跳转到下一个页面的地址http://192.168.2.11/#/xuejing/order/test1?id=8
					console.log(nexturl);
					let url =  config.baseURL + '/user/wxzhifu/getweixinopenid' +
					`?nexturl=${encodeURIComponent(nexturl)}`; //请求获得openid并存入到服务器的Cache当中
					window.location.href = url;
				}
				//this.$router.push({ name: 'order', query: { id: this.id } });
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import "./detail.scss";

	.top-shop {
		display: flex;
		padding: 14rpx;
		justify-content: space-between;

		.top-left {
			font-size: 26rpx;
			display: flex;
			align-items: center;
		}
	}

	.count_time {
		background-color: #faedea;
		display: flex;
		// justify-content: space-between;
		padding: 20rpx 20rpx;

		.time_left {
			padding: 24rpx;
			width: 80rpx;
			// margin: auto;
			text-align: center;
			border-radius: 50%;
			color: #fff;
			font-size: 28rpx;
			// height: 200rpx;
			background-color: #ec5f5a;
		}

		.time_right {
			flex: 1;
			font-size: 28rpx;

			>view {
				display: flex;
				width: 500rpx;
				// justify-content: space-between;
				// margin: 10rpx;
				margin: 0px 20rpx;
				// padding: 20rpx;
			}

			.time-s {
				display: flex;
				margin-top: 50rpx;
				justify-content: space-between;
			}
		}
	}

	.catalogue {
		.catalogue-box {
			padding: 22rpx;
			box-shadow: 0 4px 6px rgb(238, 238, 238);

			.catalogue-title {
				font-size: 32rpx;
				font-weight: 600;
			}

			.catalogue-bottom {
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;

				/deep/ {
					.u-tag--mini {
						height: 16px;
						line-height: 16px;
						padding: 0 3px;
					}
				}

				>view {
					display: flex;
					flex: 1;
					align-items: center;
					font-size: 22rpx;
					color: rgb(170, 170, 170);

					text {
						margin-left: 10rpx;
					}
				}

				button {
					// width: 100rpx;
					padding: 0;
					padding: 0 10rpx;
					background: linear-gradient(to right, #fd7200, #fe4d01);
					color: #fff;
					font-size: 26rpx;
				}
			}
		}
	}

	.evaluate {
		.evaluate-list {
			padding: 22rpx;
		}

		.evaluate-header {
			display: flex;
			align-items: center;
			font-size: 26rpx;

			text {
				margin-left: 6rpx;
			}
		}

		.evaluate-content {
			font-size: 28rpx;
		}

		.evaluate-rating {
			display: flex;
			font-size: 26rpx;
			color: #969799;
			margin: 10rpx 0;
		}
	}

	.cate-container {
		.cate-title {
			background: #fff;
			display: flex;
			justify-content: space-between;
			padding: 14rpx 20rpx;
			border-radius: 10rpx;
			align-items: center;
			// border: 1px solid #eee;
			height: 40rpx;

			>view {
				display: flex;
				align-items: center;
				font-size: 28rpx;
			}

			.text {
				font-weight: bold;
				font-size: 32rpx;
			}
		}

		.cate-list {
			padding: 10rpx 0;

			.cate-list-record {
				display: flex;
				justify-content: space-between;
				padding: 14rpx 10rpx;
				border-radius: 10rpx;
				box-shadow: 0 4px 6px rgb(238, 238, 238);
				background: #fff;
				margin: 0px 14rpx;
				margin-bottom: 10rpx;

				.cate-list-inform {
					// background: #fff;
					// box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 20rpx 16rpx;

					.inform-title {
						font-size: 24rpx;
					}

					.inform-left {
						display: flex;
						justify-content: space-between;

						.inform-price {
							color: red;
						}

						>view {
							font-size: 24rpx;
							color: #969799;
						}
					}
				}
			}
		}
	}
</style>